<template>
    <div class="commentInfo">

        <h3>发表评论</h3>
        <hr/>
        <!-- 评论内容-->
        <textarea placeholder="请输入评论呢人" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postCommentInfo">发表评论</mt-button>

        <!-- 评论列表-->
        <div class="cmt-list" >
            <div class="cmt-item" v-for="(item, i) in list" :key="item.id">
                <div class="cmt-title">
                    {{i + 1}}楼: {{item.name}}的评论是:
                </div>
                <div class="cmt-content">
                    {{item.content === "undefined" ? '这是一条占位评论' : item.content}}
                </div>
            </div>
        </div>

        <!-- 加载更多 -->
        <mt-button type="danger" size="large" plain @click="loadMore"> loading...</mt-button>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        data:function(){
            return {
                list:null,
                page:1,
                msg:''
            }
        },
        created(){
          this.getDataInfo();
        },
        methods:{
            getDataInfo(){
                this.$http.get("http://rap2api.taobao.org/app/mock/149003/home/comment/" + this.id + "?page=" + this.page)
                    .then((resultData)=>{
                        var result = resultData.body;
                        if (parseInt(result.status) === 200) {
                            if (this.page === 1) {
                                this.list = result.list;
                            } else {
                                this.list = this.list.concat(result.list)
                            }
                        } else  {
                            Toast("请求失败");
                        }
                    })
            },
            loadMore(){
                this.page++;
                this.getDataInfo()
            },
            postCommentInfo(){
                if (this.msg.length <= 0) {
                    Toast({
                        message:'请输入您的评论内容',
                        position:'bottom'
                    });
                    return;
                }
                this.$http.post('http://rap2api.taobao.org/app/mock/149003/home/submitComment/' + this.id, {
                    msg:this.msg
                }, {emulateJSON:true})
                    .then((resultData)=>{
                        var result = resultData.body;
                        if (parseInt(result.status) === 200) {
                            this.list.unshift({id:0, name:'谢道韫', content:this.msg})
                            this.msg = '';
                        } else {
                            Toast("请求失败...");
                        }
                    })
            }

        },
        props:['id']
    }
</script>

<style lang="scss" scoped>
    .commentInfo {
        h3 {
            font-size: 18px;
        }

        textarea {
            font-size: 14px;
            height: 80px;
            margin-bottom: 5px;
        }

        .cmt-list {
            margin: 5px 0;
            .cmt-item {
                font-size: 13px;
                .cmt-title {
                    line-height: 35px;
                    background-color: #8f8f94;
                }
                .cmt-content {
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>